<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>多屏互动</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <script src="../../../../page-transitions/js/jquery.min.js"></script>

    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Lato', Calibri, Arial, sans-serif;
            overflow: hidden;
        }
        .bg_div{
            width:100%;
        }
        .head_div{
            width:80%;
            height:120px;
            margin-left:auto;
            margin-right:auto;
        }
        .one_head_div{width:24.3%;height:100px;text-align: center;line-height: 100px;border: solid 1px #0000ff;float:left}
        .one_head_active{border-bottom: solid 1px #fff;}
        .content_head_div{width:200px;height:150px;text-align: center;border: solid 1px #0000ff;float:left;margin-left:20px;margin-top:20px;}
        .content_div{width:80%;
            height:500px;
            margin-left:auto;
            margin-right:auto;
            overflow: hidden;
        }
        .bottom_div{
            width:80%;
            height:100px;
            margin-left:auto;
            margin-right:auto;
        }
        .bottom_one_div{width:100px;height:50px;text-align: center;border: solid 1px #0000ff;float:left;margin-left:20px;margin-top:20px;}

    </style>
</head>
<body>

    <div class="bg_div">
        <div class="head_div" >

        </div>
        <div class="content_div">
        </div>
        <div class="bottom_div">

        </div>
    </div>
</body>
</html>

<script>
    $(document).ready(function(){
        var pageId=[[${pageId}]];
        goPage(pageId);
    });
    function goPage(id){
        var url="controlIndex?page_id="+id;
        //window.location.href="controlIndex?page_id="+id;
        $.get("getControlIndexJson",{page_id:id},function(data){
            console.info(data);
            if(data.code==200){
                var headHtml='';
                var contentHtml='';
                var bottomHtml='';
                for(var i=0;i<data.titleList.length;i++){
                    var d=data.titleList[i];
                    if(d.id==data.level_first.id){
                        headHtml+='<div class="one_head_div one_head_active">';
                    }else{
                        headHtml+='<div class="one_head_div" onclick="goPage('+d.id+')">';
                    }
                    headHtml+=d.title;
                    headHtml+='</div>';
                }
                $(".head_div").html(headHtml);
                if(data.modelOrPage=='page'){
                    contentHtml+=' <div class="content_div">'+data.level_second.content+'</div>';

                    bottomHtml+='<div class="bottom_one_div" >开始</div>';
                    bottomHtml+='<div class="bottom_one_div" >暂停</div>';
                    bottomHtml+='<div class="bottom_one_div" onclick="goPage('+data.level_second.previousPageId+')">上一页</div>';
                    bottomHtml+='<div class="bottom_one_div" onclick="goPage('+data.level_second.nextPageId+')">下一页</div>';
                }else{
                    for(var j=0;j<data.level_second_list.length;j++){
                        var dd=data.level_second_list[j];
                        contentHtml+='<div class="content_head_div" onclick="goPage('+dd.id+')">';
                        contentHtml+=dd.title;
                        contentHtml+='</div>';
                    }
                }
                $(".content_div").html(contentHtml);



                $(".bottom_div").html(bottomHtml);
            }
        });
    }
</script>